<template>
    <div class="codeList">

        <el-form :label-position="labelPosition" label-width="100px" :model="formInline" :inline="true">
            <el-form-item label="询价单编号：" class="fl">
                <el-input v-model="formInline.user" placeholder="请输入询价单编号"></el-input>
            </el-form-item>
            <el-form-item label="采购商名称："  class="fl">
                <el-input v-model="formInline.user" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="采购员名称或者手机号码：" label-width="300" class="fl">
                <el-input v-model="formInline.user" placeholder="请输入采购员名称或者手机号码"></el-input>
            </el-form-item>
            <el-form-item label="询价单状态：" class="fl ">
                <el-select v-model="formInline.region" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="询价类型：" class="fl ">
                <el-select v-model="formInline.region" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="时间：" class="fl ">

                <el-date-picker class="mr10"
                                v-model="formInline.value6"
                                type="date"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
                <el-date-picker
                        v-model="formInline.value6"
                        type="date"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="平台操作人员：" label-width="120px"  class="fl">
                <el-input v-model="formInline.user" placeholder="请输入平台操作人员"></el-input>
            </el-form-item>
            <el-form-item   class="fl">
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

        </el-form>
        <el-table
                :data="tableData3"
                border
                style="width: 100%; height: 100%">
            <el-table-column
                    fixed
                    prop="zip"
                    label="序号"
                    align="center"
                    min-width="40"
                    height=30
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="询价单编号"
                    align="center"
                    height=30
            >
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="采购商名称"
                    align="center"
                    height=30
            >
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="类型"
                    align="center"
                    height=30
            >
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="车型"
                    align="center"
                    min-width="240"
                    height=30
            >
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="创建时间"
                    align="center"
                    height=30
            >
            </el-table-column>
            <el-table-column
                prop="status"
                label="询价单状态"
                align="center"
                height=30
        >
        </el-table-column>
            <el-table-column
                    prop="status"
                    label="已响应供应商数量"
                    align="center"
                    height=30
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="已响应报价供应商数量"
                    align="center"
                    height=30
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="平台操作人员"
                    align="center"
                    height=30
            >
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="定码人员"
                    align="center"
                    height=30
            >
            </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'left',
        formInline: {
          name: '',
          region: '',
          type: '',
          value6:''
        },
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
        ]
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
  /*export default {
    data(){
      return{

      }
    },
    beforeRouteLeave(to,form,next){
      //next(false)
      next()
    }
  }*/

</script>
<style scoped lang="scss" type="text/scss">
    .codeList{
        padding: 20px 10px;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        .nav-title{
            margin-bottom: 20px;
        }
        .block{
            margin-top: 20px;
            float: right;
            padding-right: 100px;
            box-sizing: border-box;
        }
    }

</style>